<template>
  <div>
    <Card>
      <Row style="margin-left:10px;">
        <i-col span="8">
          <Icon type="ios-paper" style="font-size:28px; color:rgba(24, 144, 255, 1);" />
          <span class="rep-title">品质报告</span>
        </i-col>
      </Row>
      <!-- 人员信息 -->
      <Row style="margin-top:30px; margin-left:10px;">
        <i-col span="2">
          <!-- <img :src="linkList.imgUrl" alt style="width:60px;height:60px;" /> -->
        </i-col>
        <i-col span="3">
          <Row style="margin-top:5px;">
            <i-col span="24">
              <span style="color:rgba(0, 0, 0, 0.65);">{{linkList.info.name}}-{{linkList.info.code}}</span>
            </i-col>
          </Row>
          <Row style="margin-top:5px;">
            <i-col span="20">
              <span style="color:rgba(0, 0, 0, 0.45); font-size:12px;">{{linkList.info.comp}}</span>
            </i-col>
          </Row>
        </i-col>
        <i-col span="16">
          <Row style="margin-top:6px;">
            <i-col
              span="3"
              style="font-size:14px; color:rgba(80, 80, 80, 1); text-align:center;"
            >品质年月</i-col>
            <i-col
              span="3"
              style="font-size:14px; color:rgba(80, 80, 80, 1); text-align:center;"
            >本月星级标准</i-col>
            <i-col
              span="2"
              style="font-size:14px; color:rgba(80, 80, 80, 1); text-align:center;"
            >客户投诉</i-col>
            <i-col
              span="2"
              style="font-size:14px; color:rgba(80, 80, 80, 1); text-align:center;"
            >服务品质</i-col>
            <i-col
              span="3"
              style="font-size:14px; color:rgba(80, 80, 80, 1); text-align:center;"
            >工作态度</i-col>
            <i-col span="2" style="font-size:14px; color:rgba(80, 80, 80, 1); text-align:center;">其他</i-col>
            <i-col
              span="2"
              style="font-size:14px; color:rgba(80, 80, 80, 1); text-align:center;"
            >出勤状况</i-col>
            <i-col
              span="2"
              style="font-size:14px; color:rgba(80, 80, 80, 1); text-align:center;"
            >人员品质</i-col>
            <i-col
              span="3"
              style="font-size:14px; color:rgba(80, 80, 80, 1); text-align:center;"
            >综合得分</i-col>
          </Row>
          <Row style="margin-top:10px;">
            <i-col
              span="3"
              style="font-size:14px; color:rgba(0, 0, 0, 0.65); text-align:center;"
            >{{linkList.yearMonth?linkList.yearMonth.substr(0,4):''}}年{{linkList.yearMonth?linkList.yearMonth.substr(5,6):''}}月</i-col>
            <i-col
              span="3"
              style="font-size:14px; color:rgba(0, 0, 0, 0.65); text-align:center;"
            >{{linkList.star}}</i-col>
            <i-col
              span="2"
              style="font-size:14px; color:rgba(0, 0, 0, 0.65); text-align:center;"
            >{{linkList.clientComplain}}分</i-col>
            <i-col
              span="2"
              style="font-size:14px; color:rgba(0, 0, 0, 0.65); text-align:center;"
            >{{linkList.serviceQuality}}分</i-col>
            <i-col
              span="3"
              style="font-size:14px; color:rgba(0, 0, 0, 0.65); text-align:center;"
            >{{linkList.attitude}}分</i-col>
            <i-col
              span="2"
              style="font-size:14px; color:rgba(0, 0, 0, 0.65); text-align:center;"
            >{{linkList.other}}分</i-col>
            <i-col
              span="2"
              style="font-size:14px; color:rgba(0, 0, 0, 0.65); text-align:center;"
            >{{linkList.outState}}分</i-col>
            <i-col
              span="2"
              style="font-size:14px; color:rgba(0, 0, 0, 0.65); text-align:center;"
            >{{linkList.personQuality}}分</i-col>
            <i-col span="3" style="text-align:center; margin-top:-10px;">
              <div
                :class="{'scoreAct1':linkList.score>linkList.star,'scoreAct2':linkList.score<linkList.star}"
                style="width:35px;height:35px; line-height:35px; border-radius:50%; text-align:center; font-size:14px; display:inline-block; margin:auto;"
              >{{linkList.score}}</div>
            </i-col>
          </Row>
        </i-col>
      </Row>
      <!-- 本月品质详情 -->
      <Row style="margin-top:30px; margin-left:10px;">
        <div class="detail-title">本月品质详情</div>
        <div class="line-qr"></div>
        <div :class="minHeight==true?'minheight':''" ref="tableCard1" style="margin-top:10px;">
          <Table :columns="columns1" :data="data1" height="136">
            <template slot-scope="{row}" slot="addsubScore">
              <span
                :class="{'aboveAct':row.addsubScore<0,'buttomAct':row.addsubScore>=0}"
              >{{row.addsubScore}}</span>
            </template>
            <template slot-scope="{row}" slot="option">
              <a href="#" @click="showModal(row)" class="btn-detail">查看详情</a>
            </template>
          </Table>
        </div>
      </Row>
      <Modal
        v-model="modalDet"
        class-name="vertical-center-modal"
        footer-hide="true"
        :mask-closable="false"
        :styles="{top: '250px'}"
        width="60%"
        closable
      >
        <span slot="header" class="detTitle">品质详情</span>
        <div>
          <Row>
            <i-col span="12">
              <Row>
                <i-col span="5">
                  <p class="det-title">所属机构</p>
                </i-col>
                <i-col span="19">
                  <p class="det-info">{{modalList.managecom}}-{{modalList.managecomName}}</p>
                </i-col>
              </Row>
              <Row>
                <i-col span="5">
                  <p class="det-title">续期专员</p>
                </i-col>
                <i-col span="19">
                  <p class="det-info">{{modalList.reagentName}}-{{modalList.reagentCode}}</p>
                </i-col>
              </Row>
              <Row>
                <i-col span="5">
                  <p class="det-title">记录人</p>
                </i-col>
                <i-col span="19">
                  <p class="det-info">{{modalList.operator}}</p>
                </i-col>
              </Row>
              <Row>
                <i-col span="5">
                  <p class="det-title">品质类型</p>
                </i-col>
                <i-col span="19">
                  <p class="det-info">{{modalList.scoreType}}</p>
                </i-col>
              </Row>
              <Row>
                <i-col span="5">
                  <p class="det-title">品质年月</p>
                </i-col>
                <i-col span="19">
                  <p
                    class="det-info"
                  >{{modalList.yearMonth?modalList.yearMonth.substr(0,4):''}}年{{modalList.yearMonth?modalList.yearMonth.substr(5,6):''}}月</p>
                </i-col>
              </Row>
              <Row>
                <i-col span="5">
                  <p class="det-title">品质加扣分</p>
                </i-col>
                <i-col span="19">
                  <p class="det-info">{{modalList.addsubScore}}</p>
                </i-col>
              </Row>
              <Row>
                <i-col span="5">
                  <p class="det-title">录入详情</p>
                </i-col>
                <i-col span="19">
                  <p
                    class="det-info"
                    style="max-height:100px; overflow-x:hidden;"
                  >{{modalList.detail}}</p>
                </i-col>
              </Row>
            </i-col>
            <i-col offset="14">
              <Card style="border:0">
                <p slot="title">相关文件</p>
                <div style="margin-top:10px; border:1px solid #e8eaec; min-height:200px;">
                  <Row style="height: 50px; background-color:rgba(24, 144, 255, 0.04);">
                    <i-col span="10">
                      <p style="height: 50px; line-height: 50px; padding-left:20px;">文件名称</p>
                    </i-col>
                    <i-col offset="16">
                      <p style="height: 50px; line-height: 50px; padding-left:20px;">操作</p>
                    </i-col>
                  </Row>
                  <div v-if="clientFile!=null">
                    <Row v-for="item in clientFile" :key="item.id" style="height:35px;">
                      <i-col span="14">
                        <p
                          style="height: 30px; line-height: 30px; padding-left:20px;"
                        >{{item.fileName}}</p>
                      </i-col>
                      <i-col offset="18">
                        <a
                          href="#"
                          v-if="item.fileFormat == 'pdf'"
                          style="height: 30px; line-height: 30px; padding-left:20px;"
                          @click="download(item.fileUrl)"
                        >查看</a>
                        <a
                          href="#"
                          v-if="item.fileFormat == 'mp4'"
                          style="height: 30px; line-height: 30px; padding-left:20px;"
                          @click="playVideo(item)"
                        >播放</a>
                      </i-col>
                    </Row>
                  </div>
                  <Row v-if="clientFile==null">
                    <i-col
                      span="24"
                      style="min-height:100px; line-height:100px; text-align:center;"
                    >暂无数据</i-col>
                  </Row>
                </div>
              </Card>
            </i-col>
          </Row>
        </div>
      </Modal>
      <!-- 本月出勤详情 -->
      <Row style="margin-top:30px; margin-left:10px;">
        <div class="detail-title">本月出勤详情</div>
        <div class="line-qr"></div>
        <div
          :class="minHeight==true?'minheight':''"
          ref="tableCard2"
          style="margin-top:10px; max-width:760px;"
        >
          <Table :columns="columns2" :data="data2" height="136">
            <template slot-scope="{row}" slot="today">
              <span>{{row.today}}&nbsp;&nbsp;&nbsp;&nbsp;{{row.week}}</span>
            </template>
            <template slot-scope="{row}" slot="status">
              <span v-if="row.status=='正常'" :class="normalStatus">{{row.status}}</span>
              <span
                v-if="row.status!='正常'"
                class="errorStatus"
                @click="statusDetails(row)"
                style="cursor:pointer;"
              >{{row.status}}</span>
            </template>
          </Table>
        </div>
      </Row>
      <Modal
        v-model="modalAuality"
        footer-hide="true"
        :mask-closable="false"
        :styles="{top: '250px'}"
        @on-visible-change="modalVisibleChange"
        @on-cancel="modalCancel"
        width="60%"
        closable
      >
        <span slot="header" class="detTitle">{{currentTime}} 打卡详情</span>
        <div>
          <Row>
            <i-col span="2">
              <div>
                <!-- <img :src="linkList.imgUrl" alt class="image" /> -->
              </div>
            </i-col>
            <i-col span="20">
              <Row style="height:25px; line-height:25px;">
                <i-col span="20">{{linkList.info.name}}</i-col>
              </Row>
              <Row style="height:25px; line-height:25px;">
                <i-col span="24">
                  <span>所属机构：{{linkList.info.compCode}}-{{linkList.info.comp}}</span>
                  <span v-if="linkList.info.role == null">| 角色：——</span>
                  <span v-if="linkList.info.role != null">| 角色：{{linkList.info.role}}</span>
                </i-col>
              </Row>
            </i-col>
          </Row>
          <Row style="margin-top:10px;">
            <i-col>
              <Table width="100%" :columns="employeeColumns" :data="employeeData">
                <template slot-scope="{row}" slot="statusDetail">
                  <span style="color:red" v-if="row.detail">{{row.detail}}</span>
                  <span style="color:green" v-else>正常</span>
                </template>
              </Table>
            </i-col>
          </Row>
        </div>
      </Modal>
      <!-- 本月质量详情 -->
      <Row style="margin-top:30px; margin-left:10px;">
        <div class="detail-title">本月质量详情</div>
        <div class="line-qr"></div>
        <div :class="minHeight==true?'minheight':''" ref="tableCard3" style="margin-top:10px;">
          <Table :columns="columns3" :data="data3" :span-method="handleSpan">
            <template slot-scope="{row}" slot="score">
              <span style="color:#2d8cf0">{{row.score}}</span>
            </template>
          </Table>
        </div>
      </Row>

      <!-- 播放视频 -->
      <Modal
        footer-hide="true"
        :value="videoModal"
        :mask-closable="true"
        @on-visible-change="modalVisibleChange"
        :closable="false"
      >
        <span class="photoModal">
          <!-- <video :src="photoItem" controls id="video1" controlslist="nodownload" /> -->
        </span>
      </Modal>
    </Card>
  </div>
</template>


<script>
export default {
  data() {
    return {
      linkList: [],
      columns1: [
        {
          title: "记录人",
          key: "operator",
          align: "center",
          width: "140"
        },
        {
          title: "品质类型",
          key: "scoreType",
          align: "center",
          width: "180"
        },
        {
          title: "品质加扣分",
          key: "addsubScore",
          align: "center",
          width: "120",
          slot: "addsubScore"
        },
        {
          title: "详情",
          key: "detailSlice"
          // width: "480"
        },
        {
          title: "操作",
          key: "option",
          align: "center",
          width: "200",
          slot: "option"
        }
      ],
      modalDet: false,
      clientFile: null,
      modalList: [],
      data1: [],
      columns2: [
        {
          title: "日期",
          key: "today",
          align: "center",
          width: "200",
          slot: "today"
        },
        {
          title: "上班打卡",
          key: "upTime",
          align: "center",
          width: "180"
        },
        {
          title: "下班打卡",
          key: "downTime",
          align: "center",
          width: "180"
        },
        {
          title: "考勤状态",
          key: "status",
          align: "center",
          width: "180",
          slot: "status"
        }
      ],
      modalAuality: false,
      employeeColumns: [
        {
          title: "类型",
          key: "signType",
          width: "100"
        },
        {
          title: "打卡时间",
          key: "signTime",
          width: "120"
        },
        {
          title: "状态详情",
          key: "detail",
          width: "150",
          slot: "statusDetail"
        },
        {
          title: "地点",
          key: "site",
          width: "260"
        },
        {
          title: "设备",
          key: "equipment",
          width: ""
        }
      ],
      employeeData: [],
      currentTime: null,
      data2: [],
      columns3: [
        {
          title: "",
          key: "score",
          fixed: "left",
          align: "center",
          slot: "score",
          width: "100",
          renderHeader: (h, params) => {
            return h("div", {
              domProps: {
                // title: "点击全选", //鼠标经过的提示信息
                innerHTML: "量化统计" //自定义的列头的标题
              },
              style: {
                color: "#2d8cf0"
              }
            });
          }
        },
        {
          title: "量化类型",
          key: "type",
          align: "center",
          width: "140"
        },
        {
          title: "当月个险二次实时进度",
          key: "riskSeconPro",
          align: "center",
          width: "180"
        },
        {
          title: "当月银保二次实时进度",
          key: "bankRiskSecondPro",
          align: "center",
          width: "180"
        },
        {
          title: "当月个险三次实时进度",
          key: "riskThirdPro",
          align: "center",
          width: "180"
        },
        {
          title: "当月银保三次实时进度",
          key: "bankRiskThirdPro",
          align: "center",
          width: "180"
        },
        {
          title: "当月四次及以上（不分渠道）",
          key: "aboveThirdPro",
          align: "center",
          width: "180"
        },
        {
          title: "宽一个险二次进度",
          key: "aWideRiskSecondPro",
          align: "center",
          width: "180"
        },
        {
          title: "宽一个银保二次进度",
          key: "aWideBankRiskSecondPro",
          align: "center",
          width: "180"
        },
        {
          title: "宽一个险三次进度",
          key: "aWideRiskThirdPro",
          align: "center",
          width: "180"
        },
        {
          title: "宽一个银保三次进度",
          key: "aWideBankRiskThirdPro",
          align: "center",
          width: "180"
        },
        {
          title: "宽一四次及以上（不分渠道）",
          key: "aWideAboveThree",
          align: "center",
          width: "180"
        },
        {
          title: "宽末个险二次进度",
          key: "wideEndRiskSecondPro",
          align: "center",
          width: "180"
        },
        {
          title: "宽末个银保二次进度",
          key: "wideEndBankRiskSecondPro",
          align: "center",
          width: "180"
        },
        {
          title: "宽末个险三次进度",
          key: "wideEndRiskThirdPro",
          align: "center",
          width: "180"
        },
        {
          title: "宽末个银保三次进度",
          key: "wideEndBankRiskThirdPro",
          align: "center",
          width: "180"
        },
        {
          title: "宽末四次及以上（不分渠道）",
          key: "wideEndAboveThree",
          align: "center",
          width: "180"
        },
        {
          title: "首转成功率",
          key: "firstFinsh",
          align: "center",
          width: "180"
        },
        {
          title: "当月保单10日联系率",
          key: "finshCout",
          align: "center",
          width: "180"
        },
        {
          title: "保单45天未面访数量",
          key: "noAccess",
          align: "center",
          width: "180"
        }
      ],
      data3: [],
      weekList: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日"
      ],
      videoModal: false,
      photoItem: ""
    };
  },
  methods: {
    // 品质详情
    recordDetail() {
      let obj = {
        index: 1,
        pageSize: 10,
        reagentCode: this.linkList.info.code,
        yearMonth: this.linkList.yearMonth
      };
      this.data1 = [];
      this.api.selectEntering(obj).then(res => {
        if (res.code == 200) {
          if (res.data.records) {
            res.data.records.forEach(element => {
              if (element.detail) {
                if (element.detail.length > 30) {
                  let item = element.detail.substr(0, 30) + "...";
                  element["detailSlice"] = item;
                } else {
                  element["detailSlice"] = element.detail;
                }
              } else {
                element["detailSlice"] = "暂无详情";
                element.detail = "暂无详情";
              }
              this.data1.push(element);
            });
            // console.log(this.data1)
          }
        } else {
          this.error(res.msg);
        }
      });
    },
    // 查看详情
    showModal(row) {
      this.modalDet = true;
      this.modalList = row;
      this.clientFile = [];
      // console.log(row);
      this.api.getFileNames({ id: row.id }).then(res => {
        if (res.code == 200) {
          if (res.data.length > 0) {
            res.data.forEach(element => {
              let hz = element.fileName.split(".");
              element["fileFormat"] = hz[1];
              this.clientFile.push(element);
            });
          }
        }
      });
    },

    // 查看PDF
    download(fileUrl) {
      window.open(fileUrl + "#toolbar=0");
    },
    // 关闭视频弹窗
    modalVisibleChange(value) {
      if (!value) {
        this.videoModal = false;
        let video1 = document.getElementById("video1");
        video1.pause();
      }
    },

    // 播放视频
    playVideo(item) {
      this.videoModal = true;
      this.photoItem = item.fileUrl;
    },

    // 考情详情
    attendanceDetail() {
      let obj = {
        reagentCode: this.linkList.info.code,
        yearMonth: this.linkList.yearMonth
      };
      this.data2 = [];
      this.api.getQualityFXAttendance(obj).then(res => {
        if (res.code == 200) {
          if (res.data) {
            res.data.forEach(element => {
              let week = "";
              week = new Date(element.today);
              element["week"] = this.weekList[week.getDay()];
              element.today = element.today.substr(0, 10);
              // console.log(element);
            });
            this.data2 = res.data;
          } else {
            this.data2 = [];
          }
        } else {
          this.info(res.msg);
          this.data2 = [];
        }
      });
    },
    // 查看状态详情
    statusDetails(row) {
      this.modalAuality = true;
      this.currentTime = row.today;
      if (row.amAttendanceDetailID != null) {
        let obj = {
          id: row.amAttendanceDetailID.toString()
        };
        $.ajax("scrm-gateway/scrm-uer/api/UerAttendanceDetail/" + obj.id, {
          method: "get",
          contentType: "application/json;charset=utf-8",
          beforeSend: function(xhr) {
            xhr.setRequestHeader(
              "Authorization",
              sessionStorage.getItem("credentials")
            );
          },
          success: res => {
            if (res.data != null) {
              res.data.forEach(element => {
                element.signType = "上班打卡";
                element.signTime = element.signTime.substr(11, 5);
                this.employeeData.push(element);
              });
            }
          }
        });
      }
      if (row.pmAttendanceDetailID != null) {
        let obj2 = {
          id: row.pmAttendanceDetailID.toString()
        };
        $.ajax("scrm-gateway/scrm-uer/api/UerAttendanceDetail/" + obj2.id, {
          method: "get",
          contentType: "application/json;charset=utf-8",
          beforeSend: function(xhr) {
            xhr.setRequestHeader(
              "Authorization",
              sessionStorage.getItem("credentials")
            );
          },
          success: res => {
            if (res.data != null) {
              res.data.forEach(element => {
                element.signType = "下班打卡";
                element.signTime = element.signTime.substr(11, 5);
                this.employeeData.push(element);
              });
            }
          }
        });
      }
      //
    },
    modalCancel() {
      this.employeeData = [];
      // console.log(this.employeeData)
    },
    // 对话框关闭设置
    modalVisibleChange(bool) {
      if (bool == false) {
        this.modalAuality = false;
      }
    },
    // 质量详情
    qualityDetail() {
      let obj = {
        index: 1,
        pageSize: 10,
        reagentCode: this.linkList.info.code,
        yearMonth: this.linkList.yearMonth
      };
      //console.log(obj)
      this.data3 = [];
      this.api.getQualityAnalysis(obj).then(res => {
        //console.log(res.data)
        if (res.code == 200 && res.data) {
          //this.qualityData = res.data.data
          let list = [];
          for (let i = 0; i < res.data.data.length; i++) {
            for (let j = 0; j < 2; j++) {
              let exampleData = {
                managecomAndName: null,
                reagentCodeAndName: null,
                score: null,
                aWideAboveThree: null,
                aWideBankRiskSecondPro: null,
                aWideBankRiskThirdPro: null,
                aWideRiskSecondPro: null,
                aWideRiskThirdPro: null,
                bankRiskSecondPro: null,
                bankRiskThirdPro: null,
                finshCout: null,
                firstFinsh: null,
                noAccess: null,
                riskSeconPro: null,
                riskThirdPro: null,
                type: null,
                wideEndAboveThree: null,
                wideEndBankRiskSecondPro: null,
                wideEndBankRiskThirdPro: null,
                wideEndRiskSecondPro: null,
                wideEndRiskThirdPro: null,
                aboveThirdPro: null
              };
              exampleData.score = res.data.data[i].score;

              if (j == 1) {
                exampleData.aWideAboveThree =
                  res.data.data[i].parameterMap.aWideAboveThree;
                exampleData.aWideBankRiskSecondPro =
                  res.data.data[i].parameterMap.aWideBankRiskSecondPro;
                exampleData.aWideBankRiskThirdPro =
                  res.data.data[i].parameterMap.aWideBankRiskThirdPro;
                exampleData.aWideRiskSecondPro =
                  res.data.data[i].parameterMap.aWideRiskSecondPro;
                exampleData.aWideRiskThirdPro =
                  res.data.data[i].parameterMap.aWideRiskThirdPro;
                exampleData.aboveThirdPro =
                  res.data.data[i].parameterMap.aboveThreePro;
                exampleData.bankRiskSecondPro =
                  res.data.data[i].parameterMap.bankRiskSecondPro;
                exampleData.bankRiskThirdPro =
                  res.data.data[i].parameterMap.bankRiskThirdPro;
                exampleData.finshCout = res.data.data[i].parameterMap.finshCout;
                exampleData.firstFinsh =
                  res.data.data[i].parameterMap.firstFinsh;
                exampleData.noAccess = res.data.data[i].parameterMap.noAccess;
                exampleData.riskSeconPro =
                  res.data.data[i].parameterMap.riskSeconPro;
                exampleData.riskThirdPro =
                  res.data.data[i].parameterMap.riskThirdPro;
                exampleData.type = res.data.data[i].parameterMap.type;
                exampleData.wideEndAboveThree =
                  res.data.data[i].parameterMap.wideEndAboveThree;
                exampleData.wideEndBankRiskSecondPro =
                  res.data.data[i].parameterMap.wideEndBankRiskSecondPro;
                exampleData.wideEndBankRiskThirdPro =
                  res.data.data[i].parameterMap.wideEndBankRiskThirdPro;
                exampleData.wideEndRiskSecondPro =
                  res.data.data[i].parameterMap.wideEndRiskSecondPro;
                exampleData.wideEndRiskThirdPro =
                  res.data.data[i].parameterMap.wideEndRiskThirdPro;
              } else {
                exampleData.aWideAboveThree =
                  res.data.data[i].scoreMap.aWideAboveThree;
                exampleData.aWideBankRiskSecondPro =
                  res.data.data[i].scoreMap.aWideBankRiskSecondPro;
                exampleData.aWideBankRiskThirdPro =
                  res.data.data[i].scoreMap.aWideBankRiskThirdPro;
                exampleData.aWideRiskSecondPro =
                  res.data.data[i].scoreMap.aWideRiskSecondPro;
                exampleData.aWideRiskThirdPro =
                  res.data.data[i].scoreMap.aWideRiskThirdPro;
                exampleData.aboveThirdPro =
                  res.data.data[i].scoreMap.aboveThreePro;
                exampleData.bankRiskSecondPro =
                  res.data.data[i].scoreMap.bankRiskSecondPro;
                exampleData.bankRiskThirdPro =
                  res.data.data[i].scoreMap.bankRiskThirdPro;
                exampleData.finshCout = res.data.data[i].scoreMap.finshCout;
                exampleData.firstFinsh = res.data.data[i].scoreMap.firstFinsh;
                exampleData.noAccess = res.data.data[i].scoreMap.noAccess;
                exampleData.riskSeconPro =
                  res.data.data[i].scoreMap.riskSeconPro;
                exampleData.riskThirdPro =
                  res.data.data[i].scoreMap.riskThirdPro;
                exampleData.type = "量化得分";
                // exampleData.type = res.data.data[i].scoreMap.type;
                exampleData.wideEndAboveThree =
                  res.data.data[i].scoreMap.wideEndAboveThree;
                exampleData.wideEndBankRiskSecondPro =
                  res.data.data[i].scoreMap.wideEndBankRiskSecondPro;
                exampleData.wideEndBankRiskThirdPro =
                  res.data.data[i].scoreMap.wideEndBankRiskThirdPro;
                exampleData.wideEndRiskSecondPro =
                  res.data.data[i].scoreMap.wideEndRiskSecondPro;
                exampleData.wideEndRiskThirdPro =
                  res.data.data[i].scoreMap.wideEndRiskThirdPro;
              }
              list.push(exampleData);
            }
          }
          // console.log(list)
          this.data3 = list;
          // console.log(this.data3);
        } else {
          // this.$Message.error(res.msg);
        }
      });
    },
    // 合并行
    handleSpan({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0 && columnIndex === 0) {
        return {
          rowspan: 2,
          colspan: 1
        };
      }
      if (rowIndex % 2 === 1 && columnIndex === 0) {
        return {
          rowspan: 0,
          colspan: 0
        };
      }
    },
    adjustHeight() {
      if (this.$refs.tableCardHeight.scrollHeight < 460) {
        this.minHeight = true;
      }
    }
  },
  mounted() {
    this.recordDetail();
    this.attendanceDetail();
    this.qualityDetail();
  },
  created() {
    this.linkList = this.$route.query;
    // console.log(this.linkList);
  }
};
</script>

<style>
.ivu-icon-ios-close:before {
  color: #fff !important;
}
.rep-title {
  color: rgba(56, 56, 56, 1);
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
}
.scoreAct1 {
  background-color: rgba(255, 195, 0, 1);
  color: #fff;
}
.scoreAct2 {
  background-color: rgba(212, 48, 48, 1);
  color: #fff;
}
.detail-title {
  font-size: 16px;
  font-weight: bold;
  color: rgba(80, 80, 80, 1);
}
.line-qr {
  width: 94px;
  height: 3px;
  /* background-color: rgba(24, 144, 255, 1); */
  border-radius: 2px;
  margin-top: 4px;
}

.errorStatus {
  color: rgba(255, 87, 51, 1);
}
.normalStatus {
  color: rgba(24, 144, 255, 1);
}

.ivu-modal-header {
  border-top: 0px;
  background-color: rgba(42, 130, 228, 1);
}
.detTitle {
  color: #fff;
  font-size: 16px;
  /* // background-color: rgba(42, 130, 228, 1); */
}

.det-title {
  color: rgba(0, 0, 0, 0.45);
  height: 30px;
  line-height: 30px;
}
.det-info {
  min-height: 30px;
  line-height: 30px;
}
.image {
  width: 50px;
  height: 50px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  margin-right: 20px;
}

.aboveAct {
  color: rgba(227, 60, 100, 1);
}
.buttomAct {
  color: rgba(67, 207, 124, 1);
}

.photoModal {
  width: 500px;
  height: 400px;
  display: table-cell;
  vertical-align: middle;
}

.photoModal img,
.photoModal video {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
}
</style>